import { Form, Input, Button, Checkbox } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { UserLogin } from "../../../../api/index";
import { useNavigate } from "react-router-dom";
import { RollbackOutlined } from "@ant-design/icons";
import "../../../../../node_modules/antd/dist/antd.css";
// import { useEffect } from "react";
// import Back from "../HomePage/Back";

export default function Login() {
  let navigate = useNavigate();
  const onFinish = async (values) => {
    delete values.remember;
    const res = await UserLogin(values);
    console.log(res);
    if (res.msg == "密码错误") {
      alert("密码错误");
    } else {
      alert("登陆成功");
      localStorage.setItem("token", res.token);
      navigate("/pushmusic");
    }
  };
  return (
    <div id="login">
      <div>
        <Button
          style={{
            margin: "8px ",
            position: "fixed",
            zIndex: 101,
          }}
          type="primary"
          shape="round"
          size="middle "
          onClick={() => {
            navigate('/');
          }}
        >
          <RollbackOutlined />
        </Button>
      </div>
      <div className="logCom">
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="phone"
            rules={[
              {
                required: true,
                message: "Please input your Username!",
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your Password!",
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="disabled" noStyle>
              <Checkbox><a href="">记住我</a></Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              忘记密码？
            </a>
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
              shape="round"
            >
              登录
            </Button>
            &nbsp;或&nbsp;<a href="/register">现在注册</a>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
